import HomeView from '@/views/Home/index.vue';
import MyQuizView from '@/views/MyQuiz/index.vue';
import { createRouter, createWebHistory } from 'vue-router';
import {
  selectGroupRoute,
  noteGroupRoute,
  inputGroupRoute,
  PersonalInfoGroupRoute,
  advancedGroupRoute,
  ContactGroupRoute,
} from './materialsRoute';
import { useMaterialStore } from '@/stores/useMaterial';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomeView,
      meta: { activeMenu: '/' },
    },
    {
      path: '/my-quiz',
      name: 'MyQuiz',
      component: MyQuizView,
      meta: { activeMenu: '/my-quiz' },
    },
    {
      path: '/materials',
      name: 'Materials',
      component: () => import('@/views/Materials/index.vue'),
      redirect: '/materials/select-group',
      children: [
        {
          path: 'select-group',
          name: 'SelectGroup',
          component: () => import('@/views/Materials/SelectGroup.vue'),
          meta: { activeMenu: '/materials' },
          redirect: '/materials/select-group/single-select',
          children: selectGroupRoute,
        },
        {
          path: 'input-group',
          name: 'InputGroup',
          component: () => import('@/views/Materials/InputGroup.vue'),
          meta: { activeMenu: '/materials' },
          redirect: '/materials/input-group/text-input',
          children: inputGroupRoute,
        },
        {
          path: 'advanced-group',
          name: 'AdvancedGroup',
          component: () => import('@/views/Materials/AdvancedGroup.vue'),
          meta: { activeMenu: '/materials' },
          redirect: '/materials/advanced-group/rate-score',
          children: advancedGroupRoute,
        },
        {
          path: 'note-group',
          name: 'NoteGroup',
          component: () => import('@/views/Materials/NoteGroup.vue'),
          meta: { activeMenu: '/materials' },
          redirect: '/materials/note-group/text-note',
          children: noteGroupRoute,
        },
        {
          path: 'personal-info-group',
          name: 'PersonalInfoGroup',
          component: () => import('@/views/Materials/PersonalInfoGroup.vue'),
          meta: { activeMenu: '/materials' },
          redirect: '/materials/personal-info-group/personal-info-name',
          children: PersonalInfoGroupRoute,
        },
        {
          path: 'contact-group',
          name: 'ContactGroup',
          component: () => import('@/views/Materials/ContactGroup.vue'),
          meta: { activeMenu: '/materials' },
          redirect: '/materials/contact-group/personal-info-tel',
          children: ContactGroupRoute,
        },
      ],
    },
    {
      path: '/editor/:id(\\d+)?',
      name: 'Editor',
      component: () => import('@/views/Editor/index.vue'),
      redirect: '/editor/survey-type',
      children: [
        {
          path: 'survey-type',
          name: 'SurveyType',
          component: () => import('@/views/Editor/LeftSide/SurveyType.vue'),
        },
        {
          path: 'outline',
          name: 'Outline',
          component: () => import('@/views/Editor/LeftSide/Outline.vue'),
        },
      ],
    },
    {
      path: '/preview/:id(\\d+)',
      name: 'Preview',
      component: () => import('@/views/Preview/index.vue'),
    },
    {
      path: '/quiz/:id',
      name: 'OnlineQuiz',
      component: () => import('@/views/OnlineQuiz/index.vue'),
    },
  ],
});

router.beforeEach((to, from, next) => {
  // 设置之前需要判断一下是否是组件市场
  // 因为只有组件市场需要记录当前的组件
  const activeView = to.fullPath.split('/')[1];
  const currentMaterialCom = to.fullPath.split('/').reverse()[0];
  const store = useMaterialStore();
  if (activeView === 'materials' && currentMaterialCom) {
    store.setCurrentMaterialCom(currentMaterialCom);
  }
  next();
});

export default router;
